<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入LayUI的资源-->
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery.js"></script>
    <link href="../layui/css/layui.css" rel="stylesheet"/>

</head>
<body>
<!--声明登录窗口-->
<div id="usernameDiv" style="border: solid 2px gray;width: 400px;height: 200px;border-radius: 10px;margin: auto;margin-top: 300px;padding-top: 30px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">账户:</label>
            <div class="layui-input-inline">
                <input type="text" name="username" required  lay-verify="required" placeholder="账号/手机号/邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-inline">
                <input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">点击登录</button>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <input type="checkbox" name="" title="记住俺" lay-skin="primary" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: right;font-size: 15px">
                <a href="javascript:void(0)" id="phoneLogin">手机登录</a>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <a href="">点击注册</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
            </div>
        </div>
    </form>
</div>
<!--使用手机号登录-->
<div id="phoneDiv" style="border: solid 2px gray;width: 400px;height: 200px;border-radius: 10px;margin: auto;margin-top: 300px;padding-top: 30px;display:none">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">手机号:</label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username" required  lay-verify="required" placeholder="手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码:</label>
            <div class="layui-input-inline" style="width:60%">
                <input type="text" style="width: 100px" name="userCode"  placeholder="请输入验证码"  class="layui-input">
                <span><a href="javascript:void(0)" id="sendCode">发送验证码</a></span>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">点击登录</button>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <a href="">返回</a>
            </div>
        </div>
    </form>
</div>
</body>
</html>

<script>

    //登录
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            console.log(data)
            //发起Ajax请求
            $.post("/userLogin",data.field,function (result){//result是响应数据
                if(result.code==200){
                    window.location.href="/checkWork";
                }
            })
            return false;
        });
    });

    //声明页面加载事件
    $(function (){
        $("#phoneLogin").click(function (){
            //隐藏账号密码的div
            $("#usernameDiv").css("display","none");
            //显示手机号登录的Div
            $("#phoneDiv").css("display","");
        })
    })
    //点击发送验证码
    $(function (){
        $("#sendCode").click(function (){
            //发起Ajax请求、用来判断该手机号是否被注册
            $.post("/userCode",{phone:$("#username").val()},function (result){
                if(result==200){
                    //设置倒计时
                    var time=5;
                    var a=$(this);
                    //添加倒计时效果
                    var id=window.setInterval(function (){
                        if(time>=1){
                            time=time-1;
                            a.html(time+"s");
                        }else{
                            window.clearInterval(id);
                            a.html("发送验证码")
                        }
                    },1000)
                }else{
                    alert("手机号未被注册")
                }
            })
        })
    })
</script>
